<template lang="">
    <div>
        <myheader/>
        <van-tabs v-model="active">
                <van-tab title="用户名登录">
                        <van-field
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                      />
                      <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                      />
                      <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit" @click='login'>提交</van-button>
                      </div>

                </van-tab>
                <van-tab title="手机号登录">

                        <!-- <van-form @submit="onSubmit"> -->
                          <van-count-down :time="time"  format="还剩ss秒"   :auto-start="false" v-show='show' ref="countDown" @finish="finish"/>
                                <van-field
                                  v-model="mobile"
                                  name="mobile"
                                  label="手机号"
                                  placeholder="手机号"
                                  :rules="[{ required: true, message: '请填写手机号' }]"
                                />
                                <van-button type="primary" @click='sendSms'>发送验证码</van-button>
                                <van-field
                                  v-model="code"
                                  name="code"
                                  label="验证码"
                                  placeholder="验证码"
                                  :rules="[{ required: true, message: '请填写验证码' }]"
                                />
                                <div style="margin: 16px;">
                                  <van-button round block type="info" native-type="submit" @click='mlogin' name='btn1'>提交</van-button>
                                </div>
                              </van-form>
                </van-tab>
              
              </van-tabs>
    </div>
</template>
<script>
import myheader from '@/components/myheader'
export default {
    data() {
        return {
        active: 1,
        username:'',
        password:'',
        mobile:'',    
        code:'',
        time:10000,
        show:false,
        finish:this.finish       
        
        };
    },
    methods: {
        login(){
            this.axios.post('users/user_login',{'username':this.username,'password':this.password})
            .then(res=>{
              if(res.data.code==200){
                alert('登陆成功')
              }else if(res.data.code==12345){
                alert(res.data.mes)
              }else if(res.data.code==10010){
                alert(res.data.code.mes)
              }else if(res.data.code==20010){
                alert(res.data.mes)
              }
            })
        },
        mlogin(){
          this.axios.post('users/login',{'mobile':this.mobile,'code':this.code})
          .then(res=>{
            if(res.data.code==200){
              alert('登录成功')
            }else if(res.data.code==20013){
              alert(res.data.mes)
            }else if(res.data.code==20012){
              alert(res.data.mes)
            }
          })
        },
        //发送验证码
        sendSms(){
            alert('ddd')
            this.axios.post('users/sendsms',{'mobile':this.mobile}).then(res=>{
                if(res.data.code == 200){
                    alert(res.data.smscode)
                    // 验证码发送成功后开始倒计时
                    this.show=true
                    this.$refs.countDown.start();

                }else{
                    alert(res.data.mes)
                }
            })
        }
    },
    components:{
        'myheader':myheader
    },
    finish(){
      this.show=false
      this.$refs.countDown.reset();
    },
}
</script>
<style lang="">
    
</style>